<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpreadJS Agent Demo</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.3/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
    <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.3/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="left-panel">
            <div class="spreadjs-header">
                SpreadJS 表格控件
            </div>
            <div class="spreadjs-container">
                <div id="ss" style="width: 100%; height: 100%;"></div>
            </div>
        </div>

        <div class="right-panel">
            <div class="chat-header">
                AI Agent 对话
            </div>

            <div id="status" class="status connecting">
                正在连接服务器...
            </div>

            <div class="chat-messages" id="chatMessages">
                <div class="message agent-message">
                    <strong>SpreadJS Agent:</strong> 你好！我可以帮你操作左侧的SpreadJS表格。请告诉我你想要做什么，比如"添加一个表格, 范围为A1:C4"。
                </div>
            </div>

            <div class="input-area">
                <div class="input-container">
                    <input type="text" id="userInput" placeholder="输入你的需求..." />
                    <button id="sendButton" disabled>发送</button>
                </div>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>
